import { InputNumber } from 'antd';

const NumberRange = ({ value = {}, onChange }) => {
  const [countStart, countEnd] = Object.keys(value)

    const triggerChange = (changedValue) => {
      onChange?.({
        ...value,
        ...changedValue,
      });
    };
    const onNumberChange = (value, type) => {

      if(type === 'start') {
        triggerChange({
          [countStart]: value,
        });
      }

      if(type === 'end') {
        triggerChange({
          [countEnd]: value,
        });
      }
      
    };
    return (
      <div className='number-range'>
        <InputNumber
          controls={false}
          min={0}
          value={value[countStart] || 0}
          onChange={e => onNumberChange(e, 'start')}
        />
        <span className='separator'>~</span>
        <InputNumber
          controls={false}
          min={0}
          value={value[countEnd] || 0}
          onChange={e => onNumberChange(e, 'end')}
        />
      </div>
    );
};

export default NumberRange